<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"  
   xmlns:h="http://xmlns.jcp.org/jsf/html"
   xmlns:f="http://xmlns.jcp.org/jsf/core"
   xmlns:rich="http://richfaces.org/rich"
   xmlns:a4j="http://richfaces.org/a4j"
   xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
   xmlns:jsf="http://xmlns.jcp.org/jsf" 	>
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="../../dist/css/css.css"></link>
	<link rel="stylesheet" type="text/css" href="../../dist/css/normalize.css"></link>
	<title>Bienvenido</title>
</h:head>
<h:body>
<div class="contenido">
	<h:form>
	<div class="cabezera">		
			<h:graphicImage value="/images/BD.jpg" style=" width:100px; heigth:100px "/>	
			<br />
			<h:graphicImage value="/images/SQL.jpg" style="width:80px"/>
			<h:graphicImage value="/images/flecha.jpg" style="width:60px"/>
			<h:graphicImage value="/images/XML.jpg" style="width:70px"/>
	</div>
	</h:form>
	<div id="cabezeraMedia">
		<div >
			<h2>Converter Query to XML</h2>
			<h:outputLabel value="Ingrese Query: "/>
			<input jsf:id="inputQuery" value="#{formulario.query}" style="width: 540px; "/>								
		</div>
		<div >
			<!--Header, Details y Footer  -->			
			<br />	
			<rich:panel id="menu1" header="Menu Cabezera">			
				<h:panelGrid columns="3" cellspacing="20">			
				<h:column>
					<h:selectBooleanCheckbox />
					<h:outputLabel value="Header"/>
					<br  />
					<h:selectBooleanCheckbox />
					<h:outputLabel value="Details"/>				
					<br   />				
					<h:selectBooleanCheckbox />
					<h:outputLabel value="Footer"/>
				</h:column>	
				<h:column>
					<input type="number" placeholder="Cantidad de grupos: " value="#{formulario.cantidad}" />
					<br  />					
					<input type="number" placeholder="Cantidad de grupos: " value="#{formulario.cantidad}"/>
					<br  />
					<input type="number" placeholder="Cantidad de grupos: " value="#{formulario.cantidad}"/>
				</h:column>
				<h:column>
					<rich:collapsiblePanel header="Header" switchType="client">
						<h:panelGrid columns="3">
						<h:outputLabel value="#{formulario.atr.cantidadItem + 1}"/>
						<rich:select enableManualInput="true" defaultLabel="Elija ítem: ">
							<f:selectItem itemLabel="Curso" itemValue="0" />
							<f:selectItem itemLabel="Grupo" itemValue="1" />
							<f:selectItem itemLabel="Sexo"  itemValue="2" />
						</rich:select>
						<input type="number" placeholder="¿# Resultados?" value="" />						
						</h:panelGrid>
					</rich:collapsiblePanel>
					<rich:collapsiblePanel header="Details" switchType="client">
						<h:panelGrid columns="3">
						<h:outputLabel value="#{formulario.atr.cantidadItem + 1}"/>
						<rich:select enableManualInput="true" defaultLabel="Elija ítem: ">
							<f:selectItem itemLabel="Curso" itemValue="0" />
							<f:selectItem itemLabel="Grupo" itemValue="1" />
							<f:selectItem itemLabel="Sexo"  itemValue="2" />							
						</rich:select>
						<input type="number" placeholder="¿# Resultados?" value="" />						
						</h:panelGrid>
					</rich:collapsiblePanel>
					<rich:collapsiblePanel header="Cabezera" switchType="client">
						<h:panelGrid columns="3">
						<h:outputLabel value="#{formulario.atr.cantidadItem + 1}"/>
						<rich:select enableManualInput="true" defaultLabel="Elija ítem: ">
							<f:selectItem itemLabel="Curso" itemValue="0" />
							<f:selectItem itemLabel="Grupo" itemValue="1" />
							<f:selectItem itemLabel="Sexo"  itemValue="2" />
						</rich:select>
						<input type="number" placeholder="¿# Resultados?" value="" />						
						</h:panelGrid>
					</rich:collapsiblePanel>											
				</h:column>			
				</h:panelGrid>
			</rich:panel>                                                                                                                                                                             								
		</div>
	</div>
	<div id="contenido">
		<rich:panel id="menuContenido" header="Menu Contenido">
		 	<rich:dataTable>
		 		<f:facet name="header">
		 			<rich:columnGroup>
		 				<rich:column rowspan="2">
		 					<h:outputLabel value="Criterios"/>
		 				</rich:column>
		 				<rich:column colspan="4">
		 					<h:outputLabel value="Items"/>
		 				</rich:column>
		 				<rich:column breakRowBefore="true">
		 					<h:outputLabel value="Codigo"/>
		 				</rich:column>
		 				<rich:column>
		 					<h:outputLabel value="Codigo Profesor"/>
		 				</rich:column>
		 				<rich:column>
		 					<h:outputLabel value="# Alumnos"/>
		 				</rich:column>
		 				<rich:column>
		 					<h:outputLabel value="Otros"/>
		 				</rich:column>
		 			</rich:columnGroup>
		 		</f:facet>
		 		
		 	</rich:dataTable>
		</rich:panel>	
	</div>
	<div class="alwaysBottom">
		
	</div>
</div>
</h:body>
</html>
